<template>
	<view class="content">
        <u-navbar bgColor="#fff" :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="班组详情" >
        </u-navbar>

        <view class="uni-area">
            <!-- 班组信息 -->
            <uni-item-base class="u-m-t-30" :baseData="teamData" />
            <!-- 班组成员信息 -->
            <view class="u-m-t-40 u-m-b-30">
                <view class="u-flex u-row-between">
                    <view class="u-flex">
                        <text class="u-m-r-10 u-font-32 font-bold">班组成员信息</text>
                        <text class="u-font-24 uni-higt-color">（{{total}}人）</text>
                    </view>
                    <u-icon name="search" size="20" bold color="#333" @tap='search'></u-icon>
                </view>
                <!-- 成员列表 -->
                <uni-item-team-member class="u-m-t-30" v-for="(item,index) in list" :key="index" :listItem="item"/>
            </view>
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="scrollTop" @tap="toTop"></u-back-top>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bzId: null, // 班组id
                // 班组信息
                teamData:{
                    line: false,
                    title: '班组信息',
                    list:[
                        { field:'qymc', title:'所属单位', value:'加载中' }, // 所属企业
                        { field:'gcmc', title:'项目名称', value:'加载中' },
                        { field:'bzmc', title:'班组名称', value:'加载中' },
                        { field:'bzzxm', title:'班组组长', value:'加载中' },
                        { field:'bzzlxdh', title:'班组长联系电话', value:'加载中', type:'phone' },
                    ]
                },
                // 人员列表
                scrollTop: 0,
                total: 0,
                list: [],
			}
		},

        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },

		onLoad(option) {
            this.bzId = option.id
            // 获取班组详情数据
            this.getTeamDetail()
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            search(){
                uni.navigateTo({ url:'/pages/common/search?type=teamMember&id='+this.bzId })
            },

            
            // 班组详情
            getTeamDetail(){
                // uni.showLoading({ title:'班组详情加载中' })
                const api = JSON.parse(JSON.stringify(this.$apis.teamDetail))
                api.url = api.url+'/'+this.bzId
                this.$request(this,api,{}).then(res=>{
                    // console.log('班组详情',res)
                    this.teamData.list.map((v,i)=>{
                        v.value = res[v.field]
                    })
                    // 班组人员
                    this.getTeamStaff()
                }).then()
            },
            // 班组人员
            getTeamStaff(){
                uni.showLoading({ title:'班组成员加载中' })
                this.$request(this,this.$apis.teamStaff,{id:this.bzId}).then(res=>{
                    // console.log('班组人员',res)
                    this.total = res.total
                    this.list = res.data
                }).then()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .member{
            height: 80rpx;
            background: #F6F7F8;
            border: none;
            justify-content: space-between !important;
        }
    }
</style>
